<template>
    <div class="indexPage">
        <u-tabs :list="list1" @click="qiehuan"></u-tabs>


        <u-row
                justify="flex-start"
                gutter="10"
        >
            <u-col span="6">
                <view class="demo-layout-left">
                    <u--input
                            :placeholder="name"
                            v-model="account"
                            prefixIcon="search"
                            prefixIconStyle="font-size: 22px;color: #909399"
                    ></u--input>
                </view>
            </u-col>
            <u-col span="4">
                <view class="demo-layout-right">
                    <u-button v-if="type==1" @click="show = true">{{moren}}</u-button>
                </view>
            </u-col>
        </u-row>

        <u-grid
                :border="false"
                @click="clickItem"
        >
            <u-grid-item
                    v-for="(baseListItem,baseListIndex) in baseList"
                    :key="baseListIndex"
            >
                <u-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="baseListItem.name"
                        :size="22"
                ></u-icon>
                <text class="grid-text">{{baseListItem.title}}</text>
            </u-grid-item>
        </u-grid>
        <popMsg ref="popMsg" @alertOff="alertOff"></popMsg>
        <wxCode ref="wxCode"></wxCode>
        <u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
    </div>
</template>

<script>
    import popMsg from '../../component/dialog/index1.vue'
    import wxCode from './wxCode.vue'
    import $utils from '../../utils'

    export default {
        components: {
            popMsg,
            wxCode,
        },
        data() {
            return {
                account: "",
                moren: "请选择",
                show: false,
                columns: [
                    ['中国', '美国']
                ],
                name: "手机号",
                type: 0,
                loading: false,
                queryLoad: {},
                list1: [{
                    name: '手机号',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电费'
                }],
                baseList: [{
                    name: 'photo',
                    title: '图片'
                },
                    {
                        name: 'lock',
                        title: '锁头'
                    },
                    {
                        name: 'star',
                        title: '星星'
                    },
                ]
            }
        },
        onLoad() {
        },
        mounted() {
            document.title = '测试';
            this.codeokBtn();
        },
        methods: {
            qiehuan(item) {
                this.type = item.index;
                this.name = item.name;
                this.account = "";
            },
            cancel() {
                this.show = false
            },
            popUpMsg(i, j) {
                this.$refs.popMsg.popUpMsg(i, j)
            },
            alertOff() {
            },
            codeokBtn() {
                this.$refs.wxCode.wxCodeSet()
            },
            // 回调参数为包含columnIndex、value、values
            confirm(e) {
                var arr = e.value;
                this.moren = arr[0];
                this.show = false;
            },
            clickItem(name) {
                alert(name);
            }
        },
    }
</script>


<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout-left {
        height: 25px;
        border-radius: 4px;
        padding-left: 30px;
    }
    .demo-layout-right {
        height: 25px;
        border-radius: 4px;
    }
</style>
